import React, {
  useState,
  useEffect
} from 'react';
import { withRouter } from 'react-router-dom'
import { Card, Form, Input, Button, Radio, message, Checkbox, Select, InputNumber } from 'antd';
import BreadcrumbBox from '@/components/Base/BreadcrumbBox';
import { checkRules, useDebounceFn } from '@/utils'
import { addUserMerchant, merchantClassList } from '@/api/api'
import './index.scss';

const AddAccount = (props) => {
  const breadcrumbList = ['商户管理', '商户开户']
  const [addForm] = Form.useForm();
  const [merchantOptions, setMerchantOptions] = useState([]);
  
  // form初始值
  const [data] = useState({  
    "userName": "",
    "code": "",
    "nickName": "",
    "password": "",
    "type": "",
    "merchantClass": "",
    "handicap": ""
  })
  
  // 提交弹框表单做防抖处理
  const submitOk = useDebounceFn((values) => {
    onFinish(values)
  }, 1500, true);
  
  // 新增商户
  const onFinish = async (values) => {
    let formData = {}
    for (let key in values) {
      if (values[key]) {
        formData[key] = values[key]
      }
    }
    try {
      let params = {
        ...formData,
      }
      let res = await addUserMerchant(params)
      if (res.code === 0) {
        message.destroy()
        message.success('添加成功')
        addForm.resetFields()
      }
    } catch (error) {
      console.log(error)
    }
  };
  
  // 随机商户号
  const setRandom = () => {
    var Num="";
    for(var i=0;i<6;i++){
      Num+=Math.floor(Math.random()*10);
    }
    addForm.setFieldsValue({
      "code": Num
    });
    console.log(addForm)
  }
  
  // 获取商户分类
  const merchantClassListHanlder = async () => {
    try {
      let res = await merchantClassList()
      if(res.code === 0) {
        let arr = []
        res.data.forEach(item=>{
          arr.push({
            value: item.id,
            label: item.className,
          })
        })
        setMerchantOptions(arr)
      }
    } catch(error) {
      console.log(error)
    }
  }
  
  // 初始化
  useEffect(() => {
    merchantClassListHanlder()
    return () => {
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  
  return (
    <div className='pass-component'>
      <BreadcrumbBox list={breadcrumbList}></BreadcrumbBox>
      <div className='pass-main'>
        <Card title="添加商户">
          <div className='pass-form'>
            <Form
              name="basic"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              form={addForm}
              initialValues={data}
              autoComplete="new-password"
              onFinish={submitOk}>
              <Form.Item
                label="商户账号"
                name="userName"
                rules={[
                  { required: true, message: '请输入商户账号!' },
                ]}
              >
                <Input />
              </Form.Item>
              <Button className="rightBtn" onClick={()=>{setRandom()}}>随机生成</Button>
              <Form.Item
                label="商户编号"
                name="code"
                rules={[
                  { required: true, message: '请输入商户编号!' },
                ]}
              >
                <InputNumber style={{width: '100%'}} maxLength={6} />
              </Form.Item>
              <Form.Item
                label="商户名称"
                name="nickName"
                rules={[
                  { required: true, message: '请输入商户名称!' },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                label="登录密码"
                name="password"
                rules={[
                  { required: true, message: '请输入新密码!' },
                  // checkRules('password')
                ]}
              >
                <Input.Password />
              </Form.Item>
              <Form.Item
                label="商户分类"
                name="merchantClass"
                rules={[
                  { required: true, message: '请选择商户分类' },
                ]}
              >
                <Select options={merchantOptions} />
              </Form.Item>
              <Form.Item
                label="商户类型"
                name="type"
                rules={[
                  { required: true, message: '请选择商户分类' },
                ]}
              >
                <Select options={[
                  {value: '1', label: '现金'},
                  {value: '2', label: '信用'},
                ]} />
              </Form.Item>
              <Form.Item
                label="商户盘口"
                name="handicap"
                rules={[
                  { required: true, message: '请输入商户盘口' },
                ]}
              >
                <Input.TextArea rows={3} />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </div>
        </Card>
      </div>
    </div>
  )
}
export default withRouter(AddAccount)